<template>
    <section class="ml-wrapper ml-features">
        <div class="container">
            <div class="title ml-title"><h2 class="">{{$t('down_features_title')}}</h2>
                <div class="quote">{{$t('down_features_desc')}}</div>
                <div class="row">
                    <div class="col-sm-6 col-lg-3" v-for="(item, key) in features" :key="key">
                        <div class="content item-features">
                            <div class="title"><img :src="item.img" alt="img">
                                <div>{{ item.title }}</div>
                            </div>
                            <div class="des">{{ item.desc }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
export default {
    name: "Features",
    data() {
        return {
            features: [
                {
                    img: require('@/assets/features_1.4266c.svg'),
                    title: this.$t('down_features_li_1_title'),
                    desc: this.$t('down_features_li_1_desc'),
                },
                {
                    img: require('@/assets/features_2.c4b30.svg'),
                    title: this.$t('down_features_li_2_title'),
                    desc: this.$t('down_features_li_2_desc'),
                },
                {
                    img: require('@/assets/features_3.5d421.svg'),
                    title: this.$t('down_features_li_3_title'),
                    desc: this.$t('down_features_li_3_desc'),
                },
                {
                    img: require('@/assets/features_4.b64ac.svg'),
                    title: this.$t('down_features_li_4_title'),
                    desc: this.$t('down_features_li_4_desc'),
                },
                {
                    img: require('@/assets/features_5.cb873.svg'),
                    title: this.$t('down_features_li_5_title'),
                    desc: this.$t('down_features_li_5_desc'),
                },
                {
                    img: require('@/assets/features_6.7c1b7.svg'),
                    title: this.$t('down_features_li_6_title'),
                    desc:this.$t('down_features_li_6_desc'),
                },
                {
                    img: require('@/assets/features_7.c92f9.svg'),
                    title: this.$t('down_features_li_7_title'),
                    desc: this.$t('down_features_li_7_desc'),
                },
                {
                    img: require('@/assets/features_8.06614.svg'),
                    title: this.$t('down_features_li_8_title'),
                    desc: this.$t('down_features_li_8_desc'),
                }
            ]
        }
    }
}
</script>

<style scoped lang="scss">
@media (max-width: 767.98px) {
    .ml-features {
        .title {
            display: flex;
            h2 {
                font-size: 32px !important;
            }
        }
        .item-features {
            .title {
                flex-direction: row;
                justify-content: start;
            }
        }
    }
}

.ml-features {
    margin-top: 120px;
    text-align: center;

    .title {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        h2 {
            font-size: 40px;
            display: inline-block;
            text-align: center;
            position: relative;
            color: #222;
        }

        .quote {
            text-align: center;
            margin-top: 16px;
            color: #666;
        }

        .row {
            margin-top: 65px;

            .item-features {
                margin-bottom: 48px;
                padding: 0 8px;

                .title {
                    display: flex;
                    align-items: center;

                    div {
                        margin-left: 6px;
                        font-size: 18px;
                        font-weight: 500;
                        color: #333;
                    }
                }

                .des {
                    margin-top: 14px;
                    text-align: left;
                    font-size: 13px;
                    line-height: 1.67;
                    color: #7b7b7b;
                }
            }
        }
    }
}
</style>
